<script setup>
import userImage from '../../assets/images/user.png';
import { useRouter } from 'vue-router';
import userControl from '../../apis/userControl';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';

const router = useRouter();

// 获取通过路由状态传递的数据
const userData = ref(null);
const flag = ref(0); // 变成响应式变量
const loading = ref(false); // 用于表示是否在加载数据

// 获取历史状态并检查数据
onMounted(() => {
  const userId = history.state ? history.state.userId : null;
  userData.value = userId;
  console.log('获取到的userId:', userData.value);
  
  // 检查userId是否存在且为字符串
  if (userData.value && typeof userData.value === 'string') {
    fetchData(userData.value);
    
    // 根据userId判断flag的值
    if (userData.value.startsWith('E')) {
      flag.value = 1;
    } else if (userData.value.startsWith('V')) {
      flag.value = 2;
    } else {
      flag.value = 3;
    }
  } else {
    console.error('无效的userId:', userData.value);
    // 可以选择跳转回上一页或显示错误信息
    router.go(-1);
  }
});

const tableData = ref(null);

// 调用数据请求
const fetchData = async (userId) => {
  if (!userId) {
    console.error('userId为空，无法请求数据');
    return;
  }
  
  loading.value = true; // 请求开始时设置为加载中
  try {
    const res = await userControl.searchRole({ userId: userId });
    tableData.value = res;
    console.log('角色信息:', res);
  } catch (error) {
    console.log('请求错误:', error);
    // 可以添加用户友好的错误提示
    ElMessage.error('获取用户信息失败，请重试');
  } finally {
    loading.value = false; // 请求结束后设置为加载完毕
  }
};

// 审核状态的显示文本
const getAuditStatusText = (status) => {
  if (status === 0) {
    return '待审核';
  } else if (status === 1) {
    return '同意';
  } else if (status === -1) {
    return '拒绝';
  }
  return '未知';
};
</script>

<template>
  <!-- 加载状态显示 -->
  <div v-if="loading" class="loading">加载中...</div>

  <!-- 老人信息显示 -->
  <div v-if="flag === 1 && !loading">
    <el-descriptions
      title="志愿者信息"
      direction="vertical"
      border
      style="
        margin-top: 20px;
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
      "
    >
      <el-descriptions-item
        :rowspan="2"
        :width="140"
        label="照片"
        align="center"
      >
        <el-image
          style="
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
          "
          :src="userImage"
        />
      </el-descriptions-item>

      <el-descriptions-item label="老人ID">{{
        tableData.elderlyId
      }}</el-descriptions-item>
      <el-descriptions-item label="老人姓名">{{
        tableData.elderlyName
      }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{
        tableData.gender
      }}</el-descriptions-item>
      <el-descriptions-item label="住址">{{
        tableData.residence
      }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{
        tableData.contactNumber
      }}</el-descriptions-item>
      <el-descriptions-item label="身高"
        >{{ tableData.height }} cm</el-descriptions-item
      >
      <el-descriptions-item label="体重"
        >{{ tableData.weight }} kg</el-descriptions-item
      >
      <el-descriptions-item label="是否自理">{{
        tableData.selfCare ? '自理' : '有基础病'
      }}</el-descriptions-item>
      <el-descriptions-item label="是否独居">{{
        tableData.isLivingAlone ? '独居' : '不独居'
      }}</el-descriptions-item>
      <el-descriptions-item label="家属ID">{{
        tableData.familyId
      }}</el-descriptions-item>
      <el-descriptions-item label="家属联系电话">{{
        tableData.familyContactNumber
      }}</el-descriptions-item>
      <el-descriptions-item label="血压">{{
        tableData.bloodPressure
      }}</el-descriptions-item>
      <el-descriptions-item label="血糖"
        >{{ tableData.bloodGlucose }} mg/dL</el-descriptions-item
      >
      <el-descriptions-item label="疾病">{{
        tableData.disease
      }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{
        tableData.remarks
      }}</el-descriptions-item>
      <el-descriptions-item label="求助请求次数">{{
        tableData.helpRequestsCount
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="任务列表">
        <ul>
          <li v-for="task in elderly.tasks" :key="task.id">
            {{ task.name }} (状态: {{ task.status }})
          </li>
        </ul>
      </el-descriptions-item> -->
    </el-descriptions>
  </div>

  <!-- 志愿者信息显示 -->
  <div v-if="flag === 2 && !loading">
    <el-descriptions
      title="志愿者信息"
      direction="vertical"
      border
      style="
        margin-top: 20px;
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
      "
    >
      <el-descriptions-item
        :rowspan="2"
        :width="140"
        label="照片"
        align="center"
      >
        <el-image
          style="
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
        。  "
          :src="userImage"
        />
      </el-descriptions-item>
      <el-descriptions-item label="志愿者编号">{{
        tableData.volunteersId
      }}</el-descriptions-item>
      <el-descriptions-item label="姓名">{{
        tableData.volunteerName
      }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{
        tableData.gender
      }}</el-descriptions-item>
      <el-descriptions-item label="所属社区">{{
        tableData.community
      }}</el-descriptions-item>
      <el-descriptions-item label="志愿时长">{{
        tableData.volunteeerHours ? tableData.volunteeerHours : 0
      }}</el-descriptions-item>
      <el-descriptions-item label="年龄">{{
        tableData.age
      }}</el-descriptions-item>
      <el-descriptions-item label="评价星级"
        >{{ tableData.rating }}颗星</el-descriptions-item
      >
      <el-descriptions-item label="所属机构">{{
        tableData.affiliatedOrganization
      }}</el-descriptions-item>
      <el-descriptions-item label="完成任务次数">{{
        tableData.completedTasks
      }}</el-descriptions-item>

      <!-- 显示审核状态 -->
      <el-descriptions-item label="审核状态">
        {{ getAuditStatusText(tableData.auditStatus) }}
      </el-descriptions-item>
      <el-descriptions-item label="退还理由" v-if="tableData.auditStatus === 0">
        {{ tableData.objection }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped lang="less">
.loading {
  font-size: 18px;
  color: #1890ff;
  font-weight: bold;
  text-align: center;
  padding: 20px;
}

.el-descriptions {
  font-size: 14px;
}

.el-descriptions-item {
  padding: 10px;
  font-size: 14px;
}

.el-descriptions-item label {
  font-weight: bold;
}

.el-descriptions-item > .el-tag {
  font-size: 14px;
}

.el-image {
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
